import "./index.css"
import { FC ,useState ,Fragment} from "react"
import { Divider, Tree, Progress, Form, Input, DatePicker, Button,Cascader ,Table,Popconfirm} from 'antd';
import { SearchOutlined , EditOutlined, EyeOutlined,DeleteOutlined } from '@ant-design/icons';
import type { TableRowSelection } from 'antd/es/table/interface';
import type { ColumnsType } from 'antd/es/table';
const { TreeNode } = Tree;
interface DataType {
    key: React.Key;
    name: string;
    age: number;
    address: string;
  }
  const columns: ColumnsType<DataType> = [
    {
      title: 'Name',
      dataIndex: 'name',
    },
    {
      title: 'Age',
      dataIndex: 'age',
    },
    {
        title: 'Age',
        dataIndex: 'age',
        defaultSortOrder: 'descend',
        sorter: (a, b) => a.age - b.age,
    },
    {
        title: '分类',
        dataIndex: 'age',
    },
    {
        title: '尺寸',
        dataIndex: 'age',
    },
      {
        title: '链接地址',
        dataIndex: 'age',
    },
    {
      title: 'Address',
      dataIndex: 'address',
    },
    {
        title: '操作',
        dataIndex: 'operation',
        render: (value: any, record: any, index: number) =>
          1>0? (
            <Fragment>
            <Button icon={<EyeOutlined />}>查看</Button>
            <Button icon={<EditOutlined />}>编辑</Button>
            <Popconfirm title="确定删除吗?">
            <Button  danger icon={<DeleteOutlined />}>删除</Button>
            </Popconfirm>
           </Fragment>
          ) : null,
      },
  ];
  
  const data: DataType[] = [];
  for (let i = 0; i < 46; i++) {
    data.push({
      key: i,
      name: `Edward King ${i}`,
      age: 32,
      address: `London, Park Lane no. ${i}`,
    });
  }


const Order = () => {
     /* 每页显示 */
     interface Option {
        value: string;
        label: string;
        children?: Option[];
      }
      
      const options: Option[] = [
        {
          value: 'zhejiang',
          label: 'Zhejiang',
          children: [
            {
              value: 'hangzhou',
              label: 'Hangzhou',
              children: [
                {
                  value: 'xihu',
                  label: 'West Lake',
                },
              ],
            },
          ],
        },
        {
          value: 'jiangsu',
          label: 'Jiangsu',
          children: [
            {
              value: 'nanjing',
              label: 'Nanjing',
              children: [
                {
                  value: 'zhonghuamen',
                  label: 'Zhong Hua Men',
                },
              ],
            },
          ],
        },
      ];
      
      const dropdownRender = (menus: React.ReactNode) => (
        <div>
          {menus}
          <Divider style={{ margin: 0 }} />
          <div style={{ padding: 8 }}>The footer is not very short.</div>
        </div>
      );
      
    /* ---表格--- */
    const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);

  const onSelectChange = (newSelectedRowKeys: React.Key[]) => {
    console.log('selectedRowKeys changed: ', selectedRowKeys);
    setSelectedRowKeys(newSelectedRowKeys);
  };

  const rowSelection: TableRowSelection<DataType> = {
    selectedRowKeys,
    onChange: onSelectChange,
    selections: [
      Table.SELECTION_ALL,
      Table.SELECTION_INVERT,
      Table.SELECTION_NONE,
      {
        key: 'odd',
        text: 'Select Odd Row',
        onSelect: changableRowKeys => {
          let newSelectedRowKeys = [];
          newSelectedRowKeys = changableRowKeys.filter((_, index) => {
            if (index % 2 !== 0) {
              return false;
            }
            return true;
          });
          setSelectedRowKeys(newSelectedRowKeys);
        },
      },
      {
        key: 'even',
        text: 'Select Even Row',
        onSelect: changableRowKeys => {
          let newSelectedRowKeys = [];
          newSelectedRowKeys = changableRowKeys.filter((_, index) => {
            if (index % 2 !== 0) {
              return true;
            }
            return false;
          });
          setSelectedRowKeys(newSelectedRowKeys);
        },
      },
    ],
  };
    return (
        <fieldset>
            <div className="top">购物产品比例</div>
            <div className="process">
                <div><Progress type="circle" percent={30} width={80} /><p>食品类</p></div>
                <div><Progress type="circle" percent={80} width={80} strokeColor={"red"} /><p>服装类</p></div>
                <div><Progress type="circle" percent={95} width={80} strokeColor={"orange"} /><p>数码配件</p></div>
                <div><Progress type="circle" percent={72} width={80} strokeColor={"yellow"} /><p>手机</p></div>
                <div><Progress type="circle" percent={15} width={80} strokeColor={"purple"} /><p>电脑</p></div>
                <div><Progress type="circle" percent={46} width={80} strokeColor={"pink"} /><p>厨房用品</p></div>
                <div><Progress type="circle" percent={38} width={80} strokeColor={"aqua"} /><p>学习类</p></div>
                <div><Progress type="circle" percent={54} width={80} strokeColor={"coral"} /><p>鞋子类</p></div>
                <div><Progress type="circle" percent={60} width={80} strokeColor={"darkblue"} /><p>旅游用品</p></div>
            </div>
            <div className="bottom">
                <div className="tree">
                    <Divider orientation="left">广告图分类</Divider>
                    <Tree
                        showLine
                        checkable
                        defaultExpandedKeys={['0-0-0', '0-0-1']}
                        defaultSelectedKeys={['0-0-0', '0-0-1']}
                        defaultCheckedKeys={['0-0-0', '0-0-1']}
                    >
                        <TreeNode title="全部订单" key="0-0">
                            <TreeNode title="手机数码" key="0-0-0" >
                                <TreeNode title="三星" key="0-0-0-0" />
                                <TreeNode title="诺基亚" key="0-0-0-1" />
                            </TreeNode>
                            <TreeNode title="蔬菜水果" key="0-0-1">
                                <TreeNode title={<span style={{ color: '#1890ff' }}>香蕉</span>} key="0-0-1-0" />
                            </TreeNode>
                            <TreeNode title="电脑配件" key="0-0-2">
                                <TreeNode title="手机" key="0-0-2-1" />
                                <TreeNode title="照相机" key="0-0-2-2" />
                            </TreeNode>
                        </TreeNode>
                    </Tree>
                </div>
                <div className="fromlist">
                    <div className="listtop">
                        <Form.Item label="产品名称">
                            <Input placeholder="请输入品牌名称" style={{ width: 200 }} />
                        </Form.Item>
                        <div className="chose">
                            添加时间：
                            <DatePicker renderExtraFooter={() => 'extra footer'} showTime placeholder="请选择时间" style={{ marginRight: 10 }} />
                            <Button type="primary" icon={<SearchOutlined />}>
                                查询
                            </Button>
                        </div>
                    </div>
                    <div className="listbottom">
                        <div className="fromtop">
                            <div>每页显示： <Cascader style={{ width: 80 }} options={options} dropdownRender={dropdownRender} placeholder="10条" /></div>
                            <Input style={{ width: 150 }} placeholder="请输入关键字搜索" />
                        </div>
                        <div className="frombottom">
                            <Table rowSelection={rowSelection} columns={columns} dataSource={data} />
                        </div>
                    </div>
                </div>
            </div>
        </fieldset>
    )
}
export default Order